<template>
	<view class="page page-my">
		<view class="logo-wrap" flex h-80px items-center pl-20px pb-80px>
			<view relative>
				<image src="@/static/images/avatar.png" w-50px h-50px mode="widthFix" v-if="!user.mobile" @click="login" />
				<image src="@/static/images/avatar.png" w-50px h-50px mode="widthFix" v-else />
				<view v-if="user.userInfo.level != 'free'" class="icon icon-vip absolute bottom-6 right--14 text-40" :class="`color-${user.userInfo.level}`"></view>
			</view>
			<view class="color-white ml-3" v-if="encryptedMobile">
				<div>{{ encryptedMobile }}</div>
				<div pt-1>
					<span v-if="user.userInfo.is_shop == 1" class="icon icon-shop text-lg"></span>
					<span v-if="user.userInfo.type == 'firm'" class="icon icon-enterprise text-lg ml-1"></span>
					<span v-if="user.userInfo.type == 'employee'" class="icon icon-personal text-lg ml-1"></span>
					{{ user.userInfo.level_name }} 
					<span v-if="user.userInfo.level != 'free'">{{ user.userInfo.vip_end_at }}到期</span>
				</div>
			</view>
			<view class="color-white ml-3" v-else @click="login">点击登录</view>
			<view class="icon-wrap" @click="go('setting')">
				<view class="icon icon-setting"></view>
			</view>
		</view>

		<view mt--70px class="card1">
			<uni-group mode="card">
				<view class="charge" @click="jumpTo('charge')">充值</view>
				<view class="text-lg px-5 py-3 font-medium">我的账户</view>

				<uni-grid :column="2" :showBorder="false" :square="false" :highlight="false">
					<uni-grid-item>
						<view text-base pb-15px pl-22px>剩余条数： {{ user.num }}</view>
					</uni-grid-item>
				</uni-grid>
			</uni-group>
		</view>

		<view class="vip-enter" @click="jumpTo('vip')">
			<view class="text-lg pb-5px">汇塑云商 · VIP</view>
			<view class="text-xs">升级汇塑云商会员，尽享海量权益</view>
			<image class="image" src="@/static/images/vip.svg" mode="widthFix" />
		</view>

		<view mt-10px class="card1">
			<uni-group mode="card">
				<view class="text-lg p-5 font-medium">常用功能</view>

				<uni-grid :column="4" :showBorder="false" :square="false" :highlight="false">
					<uni-grid-item pb-15px>
						<view class="tc"  @click="jumpTo('pickup')">
							<view class="icon icon-pickup"></view>
							<view>我的跟采</view>
						</view>
					</uni-grid-item>

					<uni-grid-item>
						<view class="tc" @click="jumpTo('sale')">
							<view class="icon icon-sale"></view>
							<view>我的寄售</view>
						</view>
					</uni-grid-item>

					<uni-grid-item >
						<view class="tc" @click="jumpTo('collect')">
							<view class="icon icon-collect-filled"></view>
							<view>我的收藏</view>
						</view>
					</uni-grid-item>

					<uni-grid-item>
						<view class="tc" @click="jumpTo('require')">
							<view class="icon icon-require"></view>
							<view>我的求购</view>
						</view>
					</uni-grid-item>

					<uni-grid-item pb-15px>
						<view class="tc" @click="jumpTo('supply')">
							<view class="icon icon-supply"></view>
							<view>我的供应</view>
						</view>
					</uni-grid-item>

					<uni-grid-item pb-15px>
						<view class="tc" @click="jumpTo('askprice')">
							<view class="icon icon-askprice"></view>
							<view>我的询价</view>
						</view>
					</uni-grid-item>
					
				</uni-grid>
			</uni-group>
		</view>

		<view class="card1 mt-10px">
			<uni-group mode="card">
				<view class="text-lg p-5 font-medium">企业服务</view>

				<uni-grid :column="4" :showBorder="false" :square="false" :highlight="false">
					<uni-grid-item pb-25px >
						<view class="tc" @click="jumpTo('enterprise-auth')">
							<view class="icon icon-enterprise"></view>
							<view>企业认证</view>
						</view>
					</uni-grid-item>

					<uni-grid-item pb-25px v-if="user.userInfo.type == 'boss'">
						<view class="tc" @click="jumpTo('employee')">
							<view class="icon icon-child-account"></view>
							<view>我的员工</view>
						</view>
					</uni-grid-item>

					<uni-grid-item pb-25px v-if="user.userInfo.type == 'boss'">
						<view class="tc" @click="jumpTo('enterprise-info')">
							<view class="icon icon-enterprise-info"></view>
							<view>企业信息</view>
						</view>
					</uni-grid-item>

					<uni-grid-item pb-25px v-if="user.userInfo.type == 'boss'">
						<view class="tc" @click="jumpTo('applystore')">
							<view class="icon icon-shop"></view>
							<view>开通店铺</view>
						</view>
					</uni-grid-item>

					<uni-grid-item >
						<view class="tc" @click="jumpTo('personal-auth')">
							<view class="icon icon-personal"></view>
							<view>员工认证</view>
						</view>
					</uni-grid-item>

<!-- 
					<uni-grid-item>
						<button class="open-type-button" type="default" open-type="contact">
							<view class="icon icon-customer"></view>
							<view>微信客服</view>
						</button>
					</uni-grid-item>
 -->
					<uni-grid-item pb-25px v-if="!baseInfo.service_switch">
						<view class="tc" @click="consult()">
							<view class="icon icon-customer"></view>
							<view>企业客服</view>
						</view>
					</uni-grid-item>

				</uni-grid>
			</uni-group>
		</view>
		
		<auth v-if="show_auth" @close="show_auth = false"></auth>

	</view>

	<tabbar index="4"></tabbar>

</template>

<script setup>
	import api from '@/api'
	import { computed, ref } from 'vue'
	import { consult } from '@/common/utils';
	import { useUserStore, useBaseStore } from '@/stores/user'

	const user = useUserStore()
	const { baseInfo } = useBaseStore()

	const encryptedMobile = computed(() => {
		const reg = /(\d{3})(\d{4})(\d{4})/g
		return user.mobile ? user.mobile.replace(reg,'$1****$3') : ''
	}) 

	const show_auth = ref(false)
	const login = () => {
		show_auth.value = true
	}

	const jumpTo = (route) => {
		if(!user.mobile) {
			show_auth.value = true
			return
		}
		
		if(route == 'applystore' && (user.level == 'free')) {
			uni.showToast({
				icon: 'none',
				title: '请先开通会员'
			})
			return
		}

		if(['require','supply','pickup','sale','askprice','collect'].includes(route)) {
			uni.navigateTo({
				url: `/pages/my/${route}`
			})
			return
		}

		uni.navigateTo({
			url: `/pages/${route}/index`
		})
	}

</script>

<style lang="scss">
.page-my {
	.uni-group__content {
		padding: 0;
	}

	// 页面顶部蓝色弧低
	.logo-wrap {
		position: relative;
		background: linear-gradient(to bottom, $uni-color-navigator 60%, $uni-color-blue);

		.icon-wrap {
			position: absolute;
			right: 10px;
			top: 10px;
			color: white;
			padding: 15px;
			font-size: 22px;
		}
	}

	.icon-avatar {
		font-size: 48px;
		color: white;
	}

	.card1 {
		position: relative;
		color: $uni-text-color;

		.icon {
			font-size: 36px;
			color: $uni-color-navigator;
		}
	}

	.charge {
		position: absolute;
		right: 30px;
		top: 30px;
		background-color: $uni-color-navigator;
		color: white;
		border-radius: 8px;
		padding: 8px 16px;
	}

	.vip-enter {
		border-radius: 10px;
		background-image: linear-gradient(to bottom right,purple 30%,blue);
		position: relative;
		padding: 20px;
		margin: 10px 10px 0;
		color: white;
		.image {
			width: 50px;
			height: 50px;
			position: absolute;
			right: 20px;
			top: 25px;
		}
	}
}
</style>

